<template>
  <div class="subject-container">
    <!-- 头部 S -->
    <van-nav-bar
      title="专题"
      :placeholder ="true"
      fixed
    />
    <!-- 头部 E -->
    <!-- 列表组件 S -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    <!-- <van-cel :to="`/subject/detail/9`">1223</van-cel> -->
      <list-item v-for="item in list" :key="item.id" :subjectItem="item"/>
    </van-list>
    <!-- 列表组件 E -->
  </div>
</template>

<script>
import { getSpecialListData } from '@/api/Subject'
import listItem from './components/list-item.vue';
export default {
  components: { listItem },
  name: 'subject',
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      query: {
        page: 1, // 页码
        size: 10 //  每页数量
      }
    };
  },
  methods: {
    async onLoad() {
    try {
      // 发送请求
      const { data } = await getSpecialListData(this.query)
      // 将数据push到list数组中
      this.list.push(...data.data.data)
      // console.log(data);
      // 关闭loading
      this.loading = false
      // 判断是否结束
      if(data.data.data.length < this.query.size) {
        // 结束将finished设为true
        this.finished = true
      } else {
        // 没有结束重设置页码
        this.query.page++
      }
    } catch (error) {
      console.log(error)
    }
    },
  },
};
</script>

<style lang="less" scoped>
.subject-container {
  height: 99vh;
  overflow-y: auto;
}
 /deep/ .van-nav-bar__content {
   background: rgb(225, 28, 52);
 }
 /deep/ .van-nav-bar__title {
   color: #fff;
 }
</style>